<template>
	<view class="padding-b160" :key="refreshKey">
		<view class="project">
			<!-- <view class="project-pic" style="animation-duration: 2s;">
				<image mode="aspectFill" :src="project.mainPic">
				</image>
				<view class="project-name">{{project.projectName}}</view>
			</view> -->

			<view class="project-bg">
			<view class="project-name_content">
				<!-- <image mode="aspectFill" src="../../static/img/project-name-icon.png">
				</image> -->
				<view class="project-name">{{project.projectName}}</view>
			</view>
			<view class="project-scale-label">
				<!-- <image src="../../static/img/home/icon_xiangmu.png" mode="widthFix"></image> -->
			<view class="xmgm">
				<text>项目规模：</text>
				<text class="project-scale-value">{{ project.projectAmount }}万USDT</text>
			</view>
				<view class="project-scale-r">{{ project.rebateModeName }}</view>
			</view>
			<view class="invest-card" style="animation-duration: 2s;">
				<view class="invest-info">
					<view class="invest-info-item">
						<view class="invest-info-item-value">{{project.term}}</view>
						<view class="invest-info-item-label">项目周期</view>
						<view class="invest-info-item-label2">（{{project.timeUnit}}）</view>

					</view>
					<view class="invest-info-item">
						<view class="invest-info-item-value">{{project.rate}}</view>
						<view class="invest-info-item-label">收益率</view>
						<view class="invest-info-item-label2">（%）</view>

					</view>
					<view class="invest-info-item">
						<view class="invest-info-item-value">{{project.singleTimeMinIncome}}</view>
						<view class="invest-info-item-label">每期收益</view>
						<view class="invest-info-item-label2">（USDT）</view>

					</view>
					<!-- <view class="invest-info-item">
							<view class="invest-info-item-value">{{project.term}}</view>
							<view class="invest-info-item-label">投资期限</view>
							<view class="invest-info-item-label2">（{{project.timeUnit}}）</view>
					
						</view> -->


					<view class="invest-info-item">
						<view class="invest-info-item-value">{{project.minSubscribeAmount}}</view>
						<view class="invest-info-item-label">起购金额</view>
						<view class="invest-info-item-label2">（USDT）</view>

					</view>
				</view>
				<view class="invest-progress">
					<view class="invest-line"></view>
					<view class="project-line-progress">
						<view class="progress-title">
							项目进度
						</view>
						<uv-line-progress :percentage="project.projectSchedule" :showText="false" :activeColor="backCount == 0 ? '#FFB637' : '#FFF9C3'"
							height="8rpx" inactiveColor='#f7fbfa'></uv-line-progress>
						<view class="progress-value">
							{{project.projectSchedule}}%
						</view>
					</view>
				</view>

			</view>
		    </view>



			<view class="project-tabs" style="animation-duration: 2s;">
				<uv-tabs
    :list="list"
    @click="handleClick"
    :activeStyle="{
        color: '#FFFFFF', 
        paddingBottom: '0rpx', 
        borderBottom: '6rpx solid #f9c25f', 
        borderRadius: '0', 
        width: 'auto', 
        textAlign: 'center', 
        background: 'transparent' 
    }"
    itemStyle="flex: 1;"
>
</uv-tabs>

			</view>
			<!-- 投资信息 -->
			<uv-cell-group v-if="tabsValue === 1" border class="uv-cell-group-tbody" style="animation-duration: 2s;">
				<uv-cell size="large">
					<template #title>
						<view class="cell-title">
							分红方式
						</view>
					</template>
					<template #value>
						<view class="cell-value">{{project.rebateModeName}}</view>
					</template>
				</uv-cell>
				<uv-cell size="large">
					<template #title>
						<view class="cell-title">
							起购金额（USDT）
						</view>
					</template>
					<template #value>
						<view class="cell-value cell-value-highlight">{{project.minSubscribeAmount}}</view>
					</template>
				</uv-cell>
				<uv-cell size="large">
					<template #title>
						<view class="cell-title">
							监管机构
						</view>
					</template>
					<template #value>
						<view class="cell-value">IIROC</view>
					</template>
				</uv-cell>
				<uv-cell size="large">
					<template #title>
						<view class="cell-title">
							投资零风险
						</view>
					</template>
					<template #value>
						<view class="cell-value cell-value-highlight">本息保障</view>
					</template>
				</uv-cell>
				<uv-cell size="large">
					<template #title>
						<view class="cell-title">
							限投次数
						</view>
					</template>
					<template #value>
						<view class="cell-value cell-value-highlight">{{project.maxBuyInCount}}</view>
					</template>
				</uv-cell>

			</uv-cell-group>
			<!-- 项目说明 -->
			<uv-cell-group border class="uv-cell-group-tbody" v-if="tabsValue === 3">
				<!-- 投资详情 -->

				<uv-cell size="large" class="iteminfo" vertical>
					<template #title>
						<view class="cell-title"
							style="letter-spacing: 1px;font-size: 28rpx;color: #000;font-weight: 400;text-align: center;">
							关于本项目的详细说明
						</view>
					</template>
					<template #label>
						<view class="cell-label">{{project.projectExplain}}</view>
					</template>
				</uv-cell>
			</uv-cell-group>
			<!-- 投资详情 -->
			<uv-cell-group border class="uv-cell-group-tbody" v-if="tabsValue === 2">
				<uv-cell size="large">
					<template #title>
						<view class="cell-title">
							项目名称
						</view>
					</template>
					<template #value>
						<view class="cell-value">{{project.projectName}}</view>
					</template>
				</uv-cell>
				<uv-cell size="large">
					<template #title>
						<view class="cell-title">
							项目金额（USDT）
						</view>
					</template>
					<template #value>
						<view class="cell-value cell-value-highlight">{{project.projectAmount}}万</view>
					</template>
				</uv-cell>
				<uv-cell size="large">
					<template #title>
						<view class="cell-title">
							每期收益
						</view>
					</template>
					<template #value>
						<view class="cell-value cell-value-highlight">按每期{{project.rate}}%的收益(结算)</view>
					</template>
				</uv-cell>
				<uv-cell size="large">
					<template #title>
						<view class="cell-title">
							投资金额
						</view>
					</template>
					<template #value>
						<view class="cell-value cell-value-highlight">
							最低起投{{project.minSubscribeAmount}}USDT
							<text style="color: rgb(153,153,153);">(限买{{project.maxBuyInCount}}份)</text>
						</view>
					</template>
				</uv-cell>
				<uv-cell size="large">
					<template #title>
						<view class="cell-title">
							项目周期
						</view>
					</template>
					<template #value>
						<view class="cell-value cell-value-highlight">{{project.term}}{{project.timeUnit}}
						</view>
					</template>
				</uv-cell>
				<uv-cell size="large">
					<template #title>
						<view class="cell-title">
							返款方式
						</view>
					</template>
					<template #value>
						<view class="cell-value">{{project.rebateModeName}}
						</view>
					</template>
				</uv-cell>
				<uv-cell size="large">
					<template #title>
						<view class="cell-title">
							资金安全
						</view>
					</template>
					<template #label>
						<view class="cell-value"
							style="color: #000;margin-top: 16rpx;line-height: 40rpx;letter-spacing: 1px;font-size: 24rpx;">
							中国投融资担保股份有限公司对平台上的每一笔投资提供100%本息保障，平台设立风险备用金，对本金承诺全额垫付。
						</view>
					</template>
				</uv-cell>
				<uv-cell size="large">
					<template #title>
						<view class="cell-title">
							项目概述
						</view>
					</template>
					<template #value>
						<view class="cell-value ">{{project.projectName}}
						</view>
					</template>
				</uv-cell>

			</uv-cell-group>
			<view class="fixed-bottom-inner" style="animation-duration: 2s;">
				<button class="submit" @click="projectBuyPage">立即投资</button>
			</view>
		</view>
		<!-- <view class="fixed-bottom"> -->

		<!-- </view> -->
		<uv-back-top top="200" icon="../../static/img/tops.png" :iconStyle='backTopIconStyle'
			:scroll-top="scrollTop"></uv-back-top>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				backTopIconStyle: {
					width: '80rpx',
					height: '80rpx'
				},
				scrollTop: 0,
				id: '',
				project: '',
				list: [{
						name: '投资信息',
						value: 1
					},
					{
						name: '投资详情',
						value: 2
					},
					{
						name: '项目说明',
						value: 3
					}
				],
				tabsValue: 1,
				backCount: 0,
				refreshKey:0
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onBackPress(event) {
			if (this.backCount === 1) {
				return false;
			}
			this.backCount = 1;
			// if (event.from == 'backbutton') {
			// 	uni.showToast({
			// 		title: "不再看看吗",
			// 		icon: "none"
			// 	});
			// 	return true;
			// }
		},
		onLoad(option) {
			var that = this;
			that.id = option.id;
			that.findCanBuyProjectById();
		},
		onShow(){
			this.refreshKey += 1;
		},
		methods: {
			handleClick(val) {
				this.tabsValue = val.value
				console.log(val)
			},
			projectBuyPage() {
				uni.navigateTo({
					url: '../projectBuy/projectBuy?id=' + this.id
				});
			},

			findCanBuyProjectById() {
				var that = this;
				uni.$uv.http.get('/financialProject/findCanBuyProjectById', {
					params: {
						id: that.id
					}
				}).then(res => {
					that.project = res.data;
				});
			}

		}
	}
</script>

<style scoped lang="less">
page {
	height: auto !important;
	background-color: #f3f5ff;
}
	.padding-b160 {
		// background: #f1f2f6;
		height: calc(100% - 160rpx);
	}

	.iteminfo {
		// background: url('../../static/img/yh.png') no-repeat 94% 92% e('/') 74rpx;
	}

	.project {
		// background: #f1f2f6;
		box-sizing: border-box;

	}
	.project-bg{
		background: url(/static/img/xmbg1.png);
		background-size: 100% 100%;
		padding-top: 28rpx;
		box-sizing: border-box;
		width: 100%;	
		padding-left:30rpx;
		padding-right: 30rpx;
	}

	.project-name_content {
		display: flex;
		align-items: center;

		image {
			width: 32rpx;
			height: 32rpx;
		}

		.project-name {
			color: #FFF;
			padding: 32rpx 32rpx 32rpx 12rpx;
			font-weight: 600;
			font-size: 32rpx;
			line-height: 32rpx;
			letter-spacing: 1px;
			text-align: left;
			font-style: normal;
			text-transform: none;
		}
	}

	.project-pic {
		width: 100%;
		height: 260rpx;
		border-radius: 20rpx;
		overflow: hidden;
		position: relative;
		background: #fff;

		image {
			width: 100%;
			height: 100%;
		}


	}


	.cell-value {
		// font-size: smaller;
		// color: rgb(6, 7, 12);
		font-weight: 400;
		font-size: 28rpx;
		color: #000;
		line-height: 28rpx;
	}

	.cell-value-highlight {
		// color: rgb(27, 127, 180);
		color: #f75723;
	}

	.cell-title {
		// font-size: smaller;
		// color: rgb(153, 153, 153);
		font-weight: 400;
		font-size: 28rpx;
		color: #000;
		font-family: SF Pro Text, SF Pro Text;
	}

	.cell-label {
		padding-top: 32rpx;
		font-weight: 400;
		font-size: 24rpx;
		color: #000;
		text-align: left;
	}

	.invest-card {
		background: rgba(233, 230, 221, 0.2);
	padding: 28rpx;
	border-radius: 20rpx 20rpx 20rpx 20rpx;
    border: 1px solid #FFF;
        margin-top: 30rpx;
		.invest-progress {
			padding: 0 32rpx;
			padding-bottom: 32rpx;

			.project-line-progress {
				display: flex;
				align-items: center;

				.progress-title {
					font-weight: 400;
					font-size: 20rpx;
					color: #FFF;
					line-height: 28rpx;
					margin-right: 20rpx;
				}

				.progress-value {
					font-weight: 400;
					font-size: 28rpx;
					color: #E4D494;
					line-height: 28rpx;
					margin-left: 44rpx;
				}
			}
		}

		.invest-line {
			height: 2rpx;
			width: 100%;
			background-color: rgba(255, 255, 255, 0.1);
			margin: 32rpx 0;
		}

		.invest-info {
			display: flex;
			padding-top: 40rpx;
			// padding-bottom: 32rpx;
			align-items: center;

			.invest-info-item {
				flex: 1;
				text-align: center;
				position: relative;

				// &:after {
				// 	content: '';
				// 	position: absolute;
				// 	top: 40rpx;
				// 	right: 0px;
				// 	height: 44rpx;
				// 	width: 2rpx;
				// 	background: #ebebef;
				// 	transform: rotate(30deg);
				// }

				&:nth-last-child(1) {
					&:after {
						width: 0rpx;
					}
				}
			}



			.invest-info-item-label,
			.invest-info-item-label2 {
				// font-size: smaller;
				font-size: 24rpx;
				color: #FFF;
				// color: rgb(153, 153, 153);

			}

			// .invest-info-item-label2 {
			// 	font-size: smaller;
			// 	color: rgb(153, 153, 153);
			// }

			.invest-info-item-value {
				// font-size: large;
				padding-bottom: 12rpx;
				// color: #333;
				font-size: 28rpx;
				color: #E4D494;
				font-weight: 600;

			}
		}


	}

	.project-tabs {
		background: #2f3e8b;
		padding: 20rpx 0 20rpx 0;
	}

	.uv-cell-group-tbody {
		background: #fff;
		border-radius: 20rpx;
		margin-top: 24rpx;
	}

	.project-schedule-value {
		color: rgba(228, 212, 148, 1);
	font-weight: bold;
	font-size: 28rpx;
	margin-left: 22rpx;
	}

	/deep/ .uv-line-progress__background {
		// border: 2rpx solid #0065b7;
		// height: 10rpx;
	}

	/deep/ .uv-line-progress__line {
		height: 100% !important;
		// background: linear-gradient(120deg, #FFF9C3 0%, #FFB637 100%) !important;
	}

	/deep/ .uv-cell__body {
		padding: 32rpx;
		box-sizing: border-box;

	}

	/deep/ .uv-tabs__wrapper__nav__line {
		display: none;
	}

	/deep/ .uv-cell-group-tbody {
		background: #FFF;
		border-radius: 28rpx 28rpx 28rpx 28rpx;
	}

	/deep/ .uv-line {
		transform: scaleY(0.8) scaleX(0.89) !important;
		border-color: rgba(255, 255, 255, 0.1) !important;
	}

	/deep/ .uv-line:nth-child(1) {
		border: none !important;
	}

	/deep/ .uv-cell:last-child {
		.uv-line {
			display: none;
		}
	}
	/deep/ .uv-tabs__wrapper__nav__item__text {
	color: #FFFFFF !important;
	}

	.submit {
		// background: linear-gradient(to right, rgb(32, 160, 214), rgb(19, 123, 189));
		background: #242e6b;
		// color: #fff;
		// border: 0px;
		border-radius: 50rpx;
		height: 100rpx;
		// width:100%;
		// display: block;
		// margin: 0px auto;
		line-height: 100rpx;
		// padding: 0px;
		// box-shadow: 5px 5px 5px rgba(226, 242, 250, 1);
		font-weight: 600;
		font-size: 32rpx;
		color: #FFF;
		letter-spacing: 1px;
		text-align: center;
		margin: 0 20rpx 0 20rpx;

		&::after {
			border: 0px solid #fff;
		}
	}

	.fixed-bottom-inner {
		margin-top: 40rpx;
		padding: 0;
		// padding: 0px 40rpx;
	}

.project-schedule-l {
	font-size: smaller;
	flex-grow: 0;
	flex-shrink: 0;
	color: rgba(255, 255, 255, 0.40);
}
.project-schedule-r {
	flex: 1;


}
.project-scale-label {
	display: flex;
	align-items: center;
	font-size: 22rpx;
	color: #FFF;
.xmgm{
	background: rgba(228, 212, 148, 0.1);
	padding: 8rpx 16rpx;
}


	image {
		width: 28rpx;
		height: 28rpx;
		margin-right: 10rpx;
	}
}
.project-scale-r {
	font-size: 20rpx;
	background: rgba(228, 212, 148, 0.1);
	color: #E4D494;
	padding: 8rpx 16rpx;
	margin-left: 20rpx;
}
.project-schedule {
	display: flex;
	align-items: center;
	height: 90rpx;

	.project-schedule-label {
		padding-right: 16rpx;
		color: #FFF;
	}

}
.project-schedule-r {
	flex: 1;


}
</style>